<template>
  <div class="userInfo-container">
    <div class="app-container">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>个人信息</span>
        </div>

        <div class="descriptions-box">
          <el-descriptions
            class="margin-top"
            :column="1"
            border
          >
            <el-descriptions-item
              v-if="userInfo.s_number"
              label='学号'
            >
              {{userInfo.s_number}}
            </el-descriptions-item>

            <el-descriptions-item
              v-else
              label='工号'
            >
              {{userInfo.job_number}}
            </el-descriptions-item>

            <el-descriptions-item label='姓名'>
              {{name}}
            </el-descriptions-item>

            <el-descriptions-item
              label='性别'
              v-if="userInfo.gender"
            >
              {{userInfo.gender}}
            </el-descriptions-item>

            <el-descriptions-item label='手机号'>
              {{userInfo.phone}}
              <el-button
                type="primary"
                round
                size="mini"
                class="update-phone"
                @click="updatePhoneFn()"
              >修改手机号</el-button>

            </el-descriptions-item>

            <el-descriptions-item
              v-if="userInfo.faculty"
              label='学部'
            >
              {{userInfo.faculty}}
            </el-descriptions-item>

            <el-descriptions-item
              v-if="userInfo.grade"
              label='年级'
            >
              {{userInfo.grade}}
            </el-descriptions-item>

            <el-descriptions-item
              v-if="userInfo.s_class"
              label='班级'
            >
              {{userInfo.s_class}}
            </el-descriptions-item>

            <el-descriptions-item label='类型'>
              {{typeName}}
            </el-descriptions-item>

          </el-descriptions>
        </div>
      </el-card>

      <update-phone
        ref="phoneDialog"
        :dialogPhoneVisible.sync="dialogPhoneVisible"
        ActiveName='1'
      />
    </div>
  </div>

</template>

<script>
import { getRepairerTypeInfoAPI, getUserInfoTypeAPI } from '@/api'
import { mapGetters } from 'vuex'
import updatePhone from '../../components/UpdatePhoneDialog/'
export default {
  components: { updatePhone },
  name: 'userInfo',
  computed: {
    ...mapGetters(['userInfo', 'name'])
  },
  data () {
    return {
      dialogPhoneVisible: false,
      typeName: ''
    }
  },
  created () {
    this.getUserTypeName()
  },
  methods: {
    // 修改手机号 -> 发送获取验证码请求 -> 显示对话框
    async updatePhoneFn () {
      this.dialogPhoneVisible = true
    },
    // 获取用户类型name
    async getUserTypeName () {
      try {
        this.typeName = (await getUserInfoTypeAPI()).data.name
        if (this.typeName === '维修人员') {
          const { success, code, data } = await getRepairerTypeInfoAPI(
            this.userInfo.type_id
          )
          if (success && code === 10000) this.typeName = '维修人员：' + data
        }
      } catch (err) {
        return console.dir(err)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.update-phone {
  margin-left: 10%;
}
</style>
